//登录状态
login()
function login() {
    var token = localStorage.getItem("token")
    var username = localStorage.getItem("username")
    var userid = localStorage.getItem("userid")
    var login = document.querySelector('.header_right>:nth-child(1)')
    var logout = document.querySelector('.header_right>:nth-child(3)')
    if (token) {
        login.innerHTML = username
        logout.innerHTML = "注销"
        logout.onclick = () => {
            AG('/users/logout', { id: userid }).then(resData => {
                localStorage.removeItem("token")
                login.innerHTML = `<a href="./login1.html">登录</a>`
                logout.innerHTML = `<a href="./login1.html">注册</a>`
            })
        }
    }else{
        
        localStorage.removeItem("cDatas")
    }
}

//轮播图
var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    centeredSlides: true,
    effect: "fade",
    loop: true,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});
//回顶部
let huidingbu = document.getElementById('huidingbu')
let fixed = document.querySelector('.fixed')
huidingbu.onclick = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 添加平滑滚动效果
    });
}
//滚动300之后再显示回顶部
window.onscroll = () => {
    let st = document.documentElement.scrollTop
    if (st < 300) {
        huidingbu.style.display = 'none'
        fixed.style.bottom = '90px'
    } else {
        huidingbu.style.display = 'block'
        fixed.style.bottom = '50px'
    }
}
//下载二维码显示
appDownload()
function appDownload() {
    let appDownload = document.getElementById('appDownload')
    let appDownloadChild = appDownload.childNodes[1]
    let span = document.querySelector('#appDownload>span')
    appDownload.onmouseover = () => {
        appDownloadChild.classList.add('move')
        span.classList.add('spanMove')
    }
    appDownload.onmouseout = () => {
        appDownloadChild.classList.remove('move')
        span.classList.remove('spanMove')
    }
}
//购物车显示
cart()
function cart() {
    let cart = document.querySelector('.cart')
    let cartChild = cart.querySelector('div>p')
    let cartDiv = document.querySelector('.cart>div')
    cart.onmouseover = () => {
        cartChild.classList.add('hover')
        cartDiv.classList.add('boxShadow')
        cart.style.overflow = 'visible'
    }
    cart.onmouseout = () => {
        cartChild.classList.remove('hover')
        cartDiv.classList.remove('boxShadow')
        cart.style.overflow = 'hidden'
    }
}
//基于axios对get请求的封装
function AG(url, params) {
    return axios({
        baseURL: 'http://localhost:8888',
        url,
        params,
    })
}
//基于axios的post请求的封装
function AP(url, data) {
    return axios({
        baseURL: 'http://localhost:8888',
        method: 'post',
        url,
        data,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

    })
}
var boxLists = document.querySelector('.box-main-list')
//获取商品列表
AG('/goods/list', { pagesize: 8 }).then(resData => {
    var aLists = resData.data.list
    var html = aLists.map(item =>
        `
        <li class="list" onclick="handleClick(${item.goods_id})">
                <img src="${item.img_big_logo}"
                    alt="">
                <h3 class="title">${item.title}</h3>
                <p class="price"><span class="num">${item.price}</span>元起</p>
        </li>
        `
    )

    html = html.join('')
    boxLists.innerHTML += html
})
function handleClick(event){
   localStorage.setItem("id",event)
   window.location.href = "detail.html"
}
//渲染nav
var nav_item = document.querySelector('.nav-item')
var nav_items = document.querySelectorAll('.nav-items')
nav_items.forEach((item, index) => {
    // item.addEventListener('mouseover', () => {
    renderNav(item.innerText, index)
    // })
});
function renderNav(text, num) {
    var nav_item_lists = nav_item.children[num].querySelector('.nav-bar-list .center')
    AG('/goods/list', { current: 1, pagesize: 6, category: text }).then(resData => {
        var aLists = resData.data.list
        var html = aLists?.map(item =>
            `
                <li class="list" onclick="handleClick(${item.goods_id})">
                        <div class="img-box">
                            <img src="${item.img_big_logo}" alt="">
                            <p class="pname">${item.title}</p>
                            <p>
                                <span class="num">${item.price}</span>元起
                            </p>
                        </div>
                </li>
                `
        )

        html = html?.join('')
        nav_item_lists.innerHTML = html
    })
}
/* 渲染侧边栏 */
var sidebar = document.querySelector('.aside')
var sidebars = document.querySelectorAll(".asides")
sidebars.forEach((item, index) => {
        renderAside(item.innerText, index)
})
function renderAside(text, index) {
    var sidebar_list = sidebar.children[index].querySelector('.aside_box')
    AG('/goods/list', { current: 1, pagesize: 6, category: text }).then(resData => {
        sidebar_list.innerHTML = ''
        var aLists = resData.data.list
        var html = aLists.map(item =>
            `
            <li class="list" onclick="handleClick(${item.goods_id})">
                <img src="${item.img_big_logo}" alt="">
                <span class="pname">${item.title}</span>
            </li>
            `
        )
        html = html.join('')
        sidebar_list.innerHTML = html
    })


}
//显示隐藏侧边栏
var sideberChilds = document.querySelectorAll('.aside>li')
var sidebar_lists = document.querySelectorAll('.aside .aside_box')
sideberChilds.forEach((li, i) => {
    li.onmouseover = () => {
        sidebar_lists[i].style.display = 'block'
    }
    li.onmouseout = () => {
        sidebar_lists[i].style.display = 'none'
    }
})



